import React, { useRef, useState } from 'react';
/*
  学习目标：使用ref获取DOM, 观察类型问题
*/
export default function App() {
  const [count, setCount] = useState(0);
  // 1. 使用泛型函数的完整写法 useRef<类型>
  const iptRef = useRef<HTMLInputElement>(null);

  const handleGetDom = () => {
    // 2. 代表可选链 ，意思?前如果是空，不再往后执行
    iptRef.current?.focus();
  };
  return (
    <div>
      Hello React TS
      <h1>{count}</h1>
      <input ref={iptRef} type="text" />
      <button onClick={() => setCount(count + 1)}>点我改变count+1</button>
      <button onClick={handleGetDom}>点我获取ref</button>
    </div>
  );
}
